<template>
  <a-table
    rowKey="___key___"
    :locale="{ filterConfirm: '确定', filterReset: '重置' }"
    :columns="columns"
    :data-source="data"
    @change="onTableChange"
  ></a-table>
</template>

<script lang='ts'>
import { defineComponent, ref, toRaw, toRef } from "vue";
import DfStore from "@/store/DfStore";
import * as apps from "@/applications";

import { SortOrderType, TableHandle } from "@/models/TableHandleModel";
import { filter } from "xe-utils";

export default defineComponent({
  name: "DataTable",
  components: {},
  props: {},

  setup() {
    let data = DfStore.getData();
    let columns = DfStore.getColumns();

    const onTableChange = async (
      pagination: any,
      filters: any,
      sorter: any
    ) => {
      filters = Object.keys(filters)
        .filter((v) => filters[v].length > 0)
        .map((v) => {
          return {
            dataIndex: v,
            values: toRaw(filters[v]),
          };
        });

      const th = new TableHandle();
      th.addFilters(filters);
      if (Object.keys(sorter).length > 0) {
        th.addSort({
          columnKey: sorter.columnKey,
          order:
            sorter.order === "ascend" ? SortOrderType.Asc : SortOrderType.Desc,
        });
      }

      await apps.tableHandle(th);
    };

    return {
      data,
      columns,
      onTableChange,
    };
  },
});
</script>


<style lang="less" scoped>
code {
  text-align: left;
}
</style>
